<!-- 组件传值： 0实用新型、1外观设计、2发明 -->
<template>
  <div>
    
    <Card class="marginB10">
      <div class="overflowH f_14 TJ_big">
        <div class="TJ_title f_bold f_16">申请材料<span class="cRed">*</span></div>
        <div class="TJ_box">
          <div class="cRed marginB20">(方式一：系统自动拆分五书，拆分后可查看，支持单个文件修改；方式二：自行拆分文件后上传到对应的文件位置)</div>
          <div class="marginB30">
            <Button type="info" ghost class="marginR10" @click="$app.openWindow('static/word/专利文件说明.doc')">文件说明</Button>
            <Button type="info" class="marginR10" @click="$app.openWindow('static/word/专利文件示例.docx')">
              <Icon type="md-download" size="16" class="marginR5 relative" />模板下载
            </Button>
            
            <div class="relative inlineBlock marginR5">
              <Button type="primary">
                <Icon type="md-cloud-upload" size="16" class="marginR5 relative" />上传 - 自动拆分五书
              </Button>
              <input type="file" ref="ws" accept=".pdf" class="InputFileBox" @change="file_Up($event)"/>
            </div>
            <span class="cRed">（ 格式：pdf ）</span>
            
            
          </div>
          <div class="marginB20 overflowH">
            <div class="JC_img tran3 pointer textCenter cBlue pullLeft relative marginR20">
              <input type="file" ref="fA" accept=".pdf" class="InputFileBox" @change="each_one_up($event,'instruction_path',1)"/>
              <Icon
                type="ios-add-circle-outline"
                class="marginB5"
                style="padding-top:45px;"
                size="30"
                v-show="!five_books.instruction_path.file_url"
              />
              <div class="relative" v-show="five_books.instruction_path.file_url">
                <i class="iconfont f_40 inlineBlock marginT20" :class="$app.judgeData(five_books) && $app.fileIcon(five_books.instruction_path)"></i>
                <div class="f_12 cCCC marginT5">重新上传</div>
              </div>
            </div>
            <div class="JC_img tran3 pointer textCenter cBlue pullLeft relative marginR20">
              <input type="file" ref="fB" accept=".pdf" class="InputFileBox" @change="each_one_up($event,'instruction_abstract_path',2)"/>
              <Icon
                type="ios-add-circle-outline"
                class="marginB5"
                style="padding-top:45px;"
                size="30"
                v-show="!five_books.instruction_abstract_path.file_url"
              />
              <div class="relative" v-show="five_books.instruction_abstract_path.file_url">
                <i class="iconfont f_40 inlineBlock marginT20" :class="$app.judgeData(five_books) && $app.fileIcon(five_books.instruction_abstract_path)"></i>
                <div class="f_12 cCCC marginT5">重新上传</div>
              </div>
            </div>
            <div class="JC_img tran3 pointer textCenter cBlue pullLeft relative marginR20">
              <input type="file" ref="fC" accept=".pdf" class="InputFileBox" @change="each_one_up($event,'claims_path',3)"/>
              <Icon
                type="ios-add-circle-outline"
                class="marginB5"
                style="padding-top:45px;"
                size="30"
                v-show="!five_books.claims_path.file_url"
              />
              <div class="relative" v-show="five_books.claims_path.file_url">
                <i class="iconfont f_40 inlineBlock marginT20" :class="$app.judgeData(five_books) && $app.fileIcon(five_books.claims_path)"></i>
                <div class="f_12 cCCC marginT5">重新上传</div>
              </div>
            </div>
            <div class="JC_img tran3 pointer textCenter cBlue pullLeft relative marginR20">
              <input type="file" ref="fD" accept=".pdf" class="InputFileBox" @change="each_one_up($event,'instruction_image_path',4)"/>
              <Icon
                type="ios-add-circle-outline"
                class="marginB5"
                style="padding-top:45px;"
                size="30"
                v-show="!five_books.instruction_image_path.file_url"
              />
              <div class="relative" v-show="five_books.instruction_image_path.file_url">
                <i class="iconfont f_40 inlineBlock marginT20" :class="$app.judgeData(five_books) && $app.fileIcon(five_books.instruction_image_path)"></i>
                <div class="f_12 cCCC marginT5">重新上传</div>
              </div>
            </div>
            <div class="JC_img tran3 pointer textCenter cBlue pullLeft relative marginR20">
              <input type="file" ref="fE" accept=".pdf" class="InputFileBox" @change="each_one_up($event,'abstract_image_path',5)"/>
              <Icon
                type="ios-add-circle-outline"
                class="marginB5"
                style="padding-top:45px;"
                size="30"
                v-show="!five_books.abstract_image_path.file_url"
              />
              <div class="relative" v-show="five_books.abstract_image_path.file_url">
                <i class="iconfont f_40 inlineBlock marginT20" :class="$app.judgeData(five_books) && $app.fileIcon(five_books.abstract_image_path)"></i>
                <div class="f_12 cCCC marginT5">重新上传</div>
              </div>
            </div>
          </div>
          <div class="marginB20 overflowH">
            <div
              class="JC_img tran3 textCenter pullLeft marginR20 borderNone heightAuto bgTran  "
              :class="(!!five_books.instruction_path.file_url)&&' underline textLine'"
              @click="$app.judgeData(five_books['instruction_path'].file_url) && $app.openWindow(five_books['instruction_path'].file_url)"
            >
              <div class="txtOneLine">
                <Icon type="ios-search" size="20" class="cCCC marginR5" v-show="!!five_books.instruction_path.file_url"/>说明书</div>
              </div>
            <div
              class="JC_img tran3 textCenter pullLeft marginR20 borderNone heightAuto bgTran  "
              :class="(!!five_books.instruction_abstract_path.file_url)&&' underline textLine'"
              @click="$app.judgeData(five_books['instruction_abstract_path'].file_url) && $app.openWindow(five_books['instruction_abstract_path'].file_url)"
            >
              <div class="txtOneLine">
                <Icon type="ios-search" size="20" class="cCCC marginR5" v-show="!!five_books.instruction_abstract_path.file_url"/>说明书摘要</div>
              </div>
            <div
              class="JC_img tran3 textCenter pullLeft marginR20 borderNone heightAuto bgTran  "
              :class="(!!five_books.claims_path.file_url)&&' underline textLine'"
              @click="$app.judgeData(five_books['claims_path'].file_url) && $app.openWindow(five_books['claims_path'].file_url)"
            >
              <div class="txtOneLine">
                <Icon type="ios-search" size="20" class="cCCC marginR5" v-show="!!five_books.claims_path.file_url"/>权利要求书 </div>
              </div>
            <div
              class="JC_img tran3 textCenter pullLeft marginR20 borderNone heightAuto bgTran  "
              :class="(!!five_books.instruction_image_path.file_url)&&' underline textLine'"
              @click="$app.judgeData(five_books['instruction_image_path'].file_url) && $app.openWindow(five_books['instruction_image_path'].file_url)"
            >
              <div class="txtOneLine">
                <Icon type="ios-search" size="20" class="cCCC marginR5" v-show="!!five_books.instruction_image_path.file_url"/>说明书附图</div>
              </div>
            <div
              class="JC_img tran3 textCenter pullLeft marginR20 borderNone heightAuto bgTran  "
              :class="(!!five_books.abstract_image_path.file_url)&&' underline textLine'"
              @click="$app.judgeData(five_books['abstract_image_path'].file_url) && $app.openWindow(five_books['abstract_image_path'].file_url)"
            >
              <div class="txtOneLine">
                <Icon type="ios-search" size="20" class="cCCC marginR5" v-show="!!five_books.abstract_image_path.file_url"/>摘要附图</div>
              </div>
          </div>
          <div class="marginB20 overflowH">
            <div class="JC_img  textCenter pullLeft marginR20 borderNone heightAuto textLink">
              <Button type="info" ghost size="small" @click="$app.openWindow('static/word/说明书.doc')" >
              <Icon type="md-information-circle" size="16" class="marginR5 relative"/>说明
              </Button>
            </div>
            <div class="JC_img  textCenter pullLeft marginR20 borderNone heightAuto textLink">
              <Button type="info" ghost size="small" @click="$app.openWindow('static/word/说明书摘要.doc')" >
              <Icon type="md-information-circle" size="16" class="marginR5 relative"/>说明
              </Button>
            </div>
            <div class="JC_img  textCenter pullLeft marginR20 borderNone heightAuto textLink">
              <Button type="info" ghost size="small" @click="$app.openWindow('static/word/权利要求书.doc')" >
              <Icon type="md-information-circle" size="16" class="marginR5 relative"/>说明
              </Button>
            </div>
            <div class="JC_img  textCenter pullLeft marginR20 borderNone heightAuto textLink">
              <Button type="info" ghost size="small" @click="$app.openWindow('static/word/说明书附图.docx')" >
              <Icon type="md-information-circle" size="16" class="marginR5 relative"/>说明
              </Button>
            </div>
          </div>


          <template v-if="type==2">
            <div class="paddingT10  marginB20">
              指定说明书附图中的图
              <Input v-model="abstract_image_index" ref="abstract_image_index"
               placeholder="请输入数字" type="number" style="width:130px;" 
               onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
               @on-blur="zZs('abstract_image_index')"
               clearable
              />
              为摘要附图
            </div>
          </template>
          <div class=" paddingB20 marginB20">
            <span class="cRed f_20">*</span>
            权利要求的项数
            <Input v-model="claims_item_count" ref="claims_item_count"
              placeholder="请输入数字" type="number" style="width:130px;"
              onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
              @on-blur="zZs('claims_item_count')"
              clearable
            />
            项
          </div>
        </div>
      </div>

      <div class="overflowH f_14 TJ_big">
        <div class="TJ_title f_bold f_16">默认选项<span class="cRed">*</span></div>
        <div class="TJ_box">
          <div class="marginB20">
            <Checkbox size="large" class="paddingR10" v-model="is_cost_reduction">请求费减且已完成费减资格备案</Checkbox>
            <span class="cRed">(如果不办理费减备案则无需勾选)</span>
          </div>
          <div class="marginB20">
            <Checkbox size="large" class="paddingR10" v-model="same_day">同日申请</Checkbox>
            <span class="cRed">(
              <template v-if="type==2">
                声明本申请人对同样的发明创造在申请本发明专利的同日申请了实用新型专利
              </template>
              <template v-else>
                声明本申请人对同样的发明创造在申请本实用新型专利的同日申请了发明专利
              </template>
            )</span>
          </div>
          <template v-if="type==2">
            <div class="marginB20">
              <Checkbox size="large" class="paddingR10" v-model="is_early_release">提前公布</Checkbox>
              <span class="cRed">(请求早日公布该专利申请)</span>
            </div>
          </template>  
          
        </div>
      </div>
    </Card>
  </div>
</template>



<script>
export default {
  name: "middle",
  data() {
    let data = {
      

      is_cost_reduction:true,//费减资格
      same_day:false,//同日申请
      is_early_release:true,//是否提前发布
      abstract_image_index:'',//第几张图
      claims_item_count:'',//项数

      //专利文件 - 五书合一 这个字段只存 file_path
      patent_file_path:'',

      //5书 呵呵 巨多 巨难搞 巨烦
      five_books:{
        instruction_path: {
          file_path: "",file_url: ""//说明书
        },
        instruction_abstract_path: {
          file_path: "",file_url: ""//说明书摘要
        },
        claims_path: {
          file_path: "",file_url: ""//权利要求书
        },
        instruction_image_path: {
          file_path: "",file_url: ""//说明书附图
        },
        abstract_image_path: {
          file_path: "",file_url: ""//摘要附图
        }
      },
      appe_img_list:[],//外观图片列表
      appe_brief_desc_path:''//外观设计简要说明
    };
    return data;
  },
  //0实用新型、1外观设计、2发明 
  props:['type'],
  mounted() {
    let {type}=this;
  },
  methods: {
    //正整数判断
    zZs(who){
      let jD=this[who];
      // console.log($app.judgeData(jD))
      if($app.judgeData(jD) && !$app.numPlus(jD)){
        this.$Message.error({ content: '请输入正整数，勿含空格等特殊字符' });
        this.$refs[who].focus();//聚焦
        this[who]='';//清空值
      }
    },
    //单独每个文件上传
    each_one_up(e,string,type){
      let file = e.target.files[0];//选中的文件
      //格式判断
      $app.suffix.pdf(e,file,false,()=>{
        $ajax.upFiveBooks(file,type,resData=>{
          this.five_books[string]=resData;

          //项数赋值
          if(type==3 && ($app.judgeData(resData.claims_item_count))){
            this.claims_item_count=resData.claims_item_count;
          }

          this.$refs['fA'].value='';
          this.$refs['fB'].value='';
          this.$refs['fC'].value='';
          this.$refs['fD'].value='';
          this.$refs['fE'].value='';
        },()=>{
          this.$refs['fA'].value='';
          this.$refs['fB'].value='';
          this.$refs['fC'].value='';
          this.$refs['fD'].value='';
          this.$refs['fE'].value='';
        });
      });
      
    },
    //自动拆分5书
    file_Up(e){
      //0实用新型、2发明
      let {
        type
      }=this;


      //专利类型,1发明,2实用新型,3外观
      let patentType='';
      if(type==0){
        patentType=2;
      }else{
        patentType=1;
      }


      let file = e.target.files[0];//选中的文件

      //格式判断
      $app.suffix.pdf(e,file,false,()=>{
         $ajax.upPatentFile(file,patentType,resData=>{
          let {
            file_path,
            five_books
          }=resData;
          
          this.patent_file_path=file_path;
          
          this.five_books=five_books;//5书赋值

          //项数赋值
          if($app.judgeData(five_books.claims_path.claims_item_count)){
            this.claims_item_count=five_books.claims_path.claims_item_count;
          }


          this.$refs['ws'].value='';
        },()=>{
          this.$refs['ws'].value='';
        });
      });

     

    },
  }
};
</script>

